import globalStyles from '@/common/styles/globalStyles'
import LazyImage from '@/components/LazyImage'
import { userInfoAtom } from '@/store/user'
import { useAtom } from 'jotai'
import React from 'react'
import { View, Image, StyleSheet , Text } from 'react-native'
import HeaderItem from './HeaderItem'
import { ALI_OSS_PATH } from '@/config/path'


export default function MineHeader() {
    const [userinfo, setUserInfo] = useAtom(userInfoAtom)
    const {user_id} = userinfo
    const {free_times , free_points , charge_points} = userinfo.points
    const { avatar } = userinfo.user_info_json 
    const avatar_path = `${ALI_OSS_PATH}${avatar}`
    
    return (
        //  mine 头部
        <View style={styles.headerContainer} >
            {/* 信息区 */}
            <View style={[globalStyles.rowLine, globalStyles.aiCenter , globalStyles.jcSB, styles.userInfoView]}>
                <View  style={[globalStyles.rowLine, globalStyles.aiCenter ]}>
                    {/* 头像 */}
                    <LazyImage
                        uri={avatar_path}
                        style={styles.avatar}
                        defaultSource={require('@/assets/common/perch.png')}
                    />
                    {/* Uid */}
                    <View>
                        <View>
                            <Text style={styles.uidText} > UID: { user_id } </Text>
                        </View>
                        <View style={[styles.Button, styles.useButton , globalStyles.rowLine , globalStyles.aiCenter]}>
                            <Text style={styles.useText}>消耗明细</Text>
                            <Image style={{width:16 , height:16}} source={require("@/assets/common/chevron-right.png")} />
                        </View>
                    </View>
                </View>
                
                {/* setting */}
                <View style={[styles.Button , styles.settingButton]} >
                    <Text style={styles.useText}>设置</Text>
                </View>
            </View>
            {/* 按钮区 */}
            <View style={[globalStyles.rowLine , globalStyles.jcSB , globalStyles.aiCenter , styles.menuLayout]}>
                <HeaderItem count={free_times} title='今日免费次数' desc='每次3次免费次数'/>
                <View style={styles.line} ></View>
                <HeaderItem count={free_points} title='会员赠送点数' desc='会员获取免费点数'/>
                <View style={styles.line} ></View>
                <HeaderItem count={charge_points} title='购买点数' desc='购买点数制作图片' isIcon={true} />
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    headerContainer:{
        paddingVertical:12,
        backgroundColor:'#fff',
        borderRadius:16
    },
    userInfoView: {
        paddingLeft:24 , 
    },
    avatar: {
        width: 84,
        height: 84,
        marginRight: 16,
        borderRadius: 42
    },
    uidText:{
        color: '#663c00',
        fontWeight:'600',
        fontSize:14
    },
    Button:{
        backgroundColor:"#F2F2F2",
        paddingHorizontal:8,
        paddingVertical:6,
    },
    useButton:{
        borderRadius:12,
        alignSelf:'flex-start',
        marginTop:6
    },
    useText:{
        fontSize:12,
        color:'#babdc4',
        fontWeight:'600'
    },
    settingButton:{
        borderTopLeftRadius:12,
        borderBottomLeftRadius:12
    },
    line:{
        width:1,
        height:"70%",
        backgroundColor:'#babdc4'
    },
    menuLayout:{
        paddingHorizontal:16,
        paddingTop:24,
        paddingBottom:16
    }
})